<template>
  <QupFormContainer :column="3">
    <el-form ref="form" :model="formData" :rules="formRules" label-width="140px">
      <el-form-item prop="isChangeBusinessType" label="是否新增客户业务类型">
        <el-switch v-model="formData.isChangeBusinessType" :active-value="1" :inactive-value="0" @change="handleBusinessTypeChange" />
      </el-form-item>
      <el-form-item v-if="[1,'1'].includes(formData.isChangeBusinessType)" prop="afterBusinessTypeCode" label="本次新增业务类型" :span="24/3*2">
        <c-common-search-mdm
          v-if="startObserve && getBusinessTypeSuccess"
          placeholder="请选择"
          cust-doc-code="QY037"
          :filters-raw="[]"
        >
          <!-- {id:'code',property:'code',value:`[${businessType}]`,operator:'NOT IN'} -->
          <template v-slot="data">
            <el-checkbox-group v-model="formData.afterBusinessTypeCode" @change="v=>handleBusinessChange(data,v)">
              <el-checkbox v-for="d in data" :key="d.code" :label="d.code">{{ d.name }}</el-checkbox>
            </el-checkbox-group>
          </template>
        </c-common-search-mdm>
      </el-form-item>
      <el-form-item prop="isChangeAccount" label="是否新增业务账号">
        <el-switch v-model="formData.isChangeAccount" :active-value="1" :inactive-value="0" @change="handleChangeAccount" />
      </el-form-item>
      <template v-if="[1,'1'].includes(formData.isChangeAccount)">
        <el-form-item label="账号名称" prop="accountCode">
          <c-common-search-account
            v-model="formData.accountCode"
            :label.sync="formData.accountName"
            :account-type-name_res.sync="formData.accountTypeName"
            :account-type-code_res.sync="formData.accountTypeCode"
            :customer-code="detail.customerCode"
          />
        </el-form-item>
        <el-form-item prop="accountName" label="账号编码">
          <span>{{ formData.accountCode }}</span>
        </el-form-item>
        <el-form-item prop="accountTypeName" label="账号类型称">
          <span>{{ formData.accountTypeName }}</span>
        </el-form-item>
      </template>
    </el-form>
  </QupFormContainer>
</template>
<script>
import { getAllShopData } from '@/api/channelTask2/archiveChange'
export default {
  name: 'CustomerBusinessTypeChange',
  props: {
    detail: {
      type: Object,
      default: () => ({})
    },
    startObserve: {
      type: Boolean,
      default: false
    },
    isShopChange: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        isChangeBusinessType: 0,
        isChangeAccount: 0,
        accountCode: '',
        accountName: '',
        accountTypeCode: '',
        accountTypeName: '',
        afterBusinessTypeCode: [],
        afterBusinessTypeName: []
      },
      businessType: '',
      getBusinessTypeSuccess: false
    }
  },
  computed: {
    formRules() {
      return {
        afterBusinessTypeCode: [{ required: [1, '1'].includes(this.formData.isChangeBusinessType), validator: (r, v, c) => {
          if (![1, '1'].includes(this.formData.isChangeBusinessType)) {
            c()
            return
          }
          if (!v || v.length <= 0) {
            c(new Error('请选择本次新增业务类型'))
          } else {
            c()
          }
        }, trigger: 'change' }],
        accountCode: [{ required: [1, '1'].includes(this.formData.isChangeAccount), message: '请选择账号', trigger: 'change' }]
      }
    }
  },
  watch: {
    detail: {
      handler(v) {
        this.initFormData()
      },
      immediate: true
    },
    formData: {
      handler(v) {
        this.$emit('input', v)
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    // if (!this.isShopChange) {
    //   this.getAllShop()
    // } else {
    this.getBusinessTypeSuccess = true
    this.businessType = this.detail.businessTypeCode
    // }
  },
  methods: {
    validate() {
      return this.$refs.form.validate()
    },
    handleBusinessTypeChange(v) {
      if (![1, '1'].includes(v)) {
        this.$set(this.formData, 'afterBusinessTypeCode', [])
        this.$set(this.formData, 'afterBusinessTypeName', [])
      }
    },
    handleChangeAccount(v) {
      if (![1, '1'].includes(v)) {
        this.$set(this.formData, 'accountCode', '')
        this.$set(this.formData, 'accountName', '')
        this.$set(this.formData, 'accountTypeName', '')
        this.$set(this.formData, 'accountTypeCode', '')
      }
    },
    handleBusinessChange(data, v) {
      this.formData.afterBusinessTypeName = data.filter(e => v.includes(e.code)).map(e => e.name)
    },
    initFormData() {
      Object.entries(this.formData).forEach(([k, v]) => {
        let t = this.detail[k]
        if (v instanceof Array && typeof t === 'string' && !(t instanceof Array)) {
          t = t.split(',')
        }
        this.$set(this.formData, k, t !== undefined ? t : v)
      })
    },
    // 获取所有门店
    getAllShop() {
      getAllShopData(this.detail.customerCode).then(res => {
        const businessTypeList = res.data.filter(e => ![4, '4'].includes(e.businessStatus)).map(e => (e.businessType || '').split(','))
        this.businessType = Array.from(new Set(businessTypeList.flat(Infinity))).join(',')
        this.getBusinessTypeSuccess = true
      })
    }
  }
}
</script>
